<script setup lang="ts">
import { computed } from "vue"
import { TabsProps } from "ant-design-vue"
import { Tabs } from "../tabs"

export type Props = TabsProps

const props = defineProps<Props>()

const model = defineModel<TabsProps["activeKey"]>()

const slots = defineSlots<InstanceType<typeof Tabs>["$slots"]>()

const computedProps = computed<Omit<Props, "activeKey">>(() => {
  let omit = { ...props }
  delete omit.activeKey
  return omit
})
</script>

<template>
  <Tabs v-model:active-key="model" v-bind="computedProps" class="pc-view-tabs">
    <template v-for="(_, key) in slots" :key="key" #[key]="params">
      <slot :name="key" :key="key" v-bind="params"></slot>
    </template>
  </Tabs>
</template>
<style>
.pc-view-tabs.ant-tabs > .ant-tabs-nav {
  @apply pc-mb-0 pc-h-[38px];
  @apply pc-border-b pc-border-[#e5e6eb];
  @apply pc-bg-white;
  @apply pc-leading-[38px];
}

.pc-view-tabs.ant-tabs > .ant-tabs-nav .ant-tabs-tab {
  @apply pc-m-0 pc-box-border pc-w-[128px] pc-justify-between pc-px-[12px] pc-py-0;
  @apply pc-rounded-none pc-border-b-2 pc-border-solid pc-border-transparent;
  @apply pc-bg-white hover:pc-bg-[#f7f8fa];
  @apply pc-text-[13px] pc-text-[#4e5969];
}

.pc-view-tabs.ant-tabs > .ant-tabs-nav .ant-tabs-tab::before {
  @apply pc-absolute pc-right-0 pc-h-[16px];
  @apply pc-border-l pc-border-solid pc-border-[#e5e6eb];
  content: " ";
}

.pc-view-tabs.ant-tabs > .ant-tabs-nav .ant-tabs-tab .ant-tabs-tab-remove {
  @apply pc-hidden;
}

.pc-view-tabs.ant-tabs
  > .ant-tabs-nav
  .ant-tabs-tab:hover
  .ant-tabs-tab-remove {
  @apply pc-block;
}

.pc-view-tabs.ant-tabs > .ant-tabs-nav .ant-tabs-tab .ant-tabs-tab-btn {
  @apply pc-overflow-hidden;
  @apply pc-text-ellipsis pc-whitespace-nowrap;
}

.pc-view-tabs.ant-tabs > .ant-tabs-nav .ant-tabs-tab:hover .ant-tabs-tab-btn {
  @apply pc-text-[#4e5969];
}

.pc-view-tabs.ant-tabs > .ant-tabs-nav .ant-tabs-tab-active {
  @apply pc-border-b-2 pc-border-b-[#165dff];
  @apply pc-bg-[#f2f4f7] hover:pc-bg-[#f2f4f7];
}

.pc-view-tabs.ant-tabs > .ant-tabs-nav .ant-tabs-tab-active .ant-tabs-tab-btn {
  @apply pc-text-[#165dff];
  text-shadow: none;
}

.pc-view-tabs.ant-tabs
  > .ant-tabs-nav
  .ant-tabs-tab-active:hover
  .ant-tabs-tab-btn {
  @apply pc-text-[#165dff];
}

.pc-view-tabs.ant-tabs > .ant-tabs-nav .ant-tabs-nav-operations {
  @apply pc-flex pc-w-[48px] pc-justify-center;
}

.pc-view-tabs.ant-tabs
  > .ant-tabs-nav
  .ant-tabs-nav-operations
  .ant-tabs-nav-more {
  @apply pc-flex;
}

.pc-view-tabs.ant-tabs
  > .ant-tabs-nav
  .ant-tabs-nav-operations
  .ant-tabs-nav-more
  .h-icon {
  @apply pc-h-full pc-p-[4px];
}

.pc-view-tabs.ant-tabs > .ant-tabs-nav .ant-tabs-nav::before {
  @apply pc-border-b-0;
}
</style>
